﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="_1041368_1041345_1041422_DAGK.Pages.Home1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>1041368_1041345_1041422_DAGK</title>
    <link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDlE8xFO0oA7GooKcWCWVoZbU1GgsiwaKA&sensor=true">
    </script>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    // Begin Main Function
    <script type="text/javascript">
        var map;
        var markers = [];                
        var currentPoint = new google.maps.LatLng(10.760208090833615, 106.68334007263184);
        function initialize() {
            var myOptions = {
                center: new google.maps.LatLng(10.760208090833615, 106.68334007263184),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.addListener(map, "click", function (e) 
            {
                currentPoint = e.latLng;
                $("#txtKinhDo").val(currentPoint.lng());
                $("#txtViDo").val(currentPoint.lat());
                $("#txtKinhDo1").val(currentPoint.lng());
                $("#txtViDo1").val(currentPoint.lat());
                $("#txtMaDuLieu").val("");
                $("#txtSoNha").val("");
            });
            LoadListMarker();
            InitDropDownList();            
        }                                                               
    </script>
    //End Main Function //Begin Child Function
    <script type="text/javascript">
        var inforwindows = [];
        function RemoveInfo() 
        {
            for (var i = 0; i < inforwindows.length; i++) 
            {
                if(inforwindows[i])
                    inforwindows[i].close();
            }                    
        }

        function ShowInfo(marker, SoNha, KinhDo, ViDo, MaDuLieu) 
        {            
            var infowindow = new google.maps.InfoWindow(
            {
                content: "Số nhà : " + SoNha,
                size: new google.maps.Size(50, 50)
            });
            google.maps.event.addListener(marker, 'click', function () {
                $("#txtMaDuLieu").val(MaDuLieu);
                $("#txtSoNha").val(SoNha);
                $("#txtKinhDo").val(KinhDo);
                $("#txtViDo").val(ViDo);
                $("#txtKinhDo1").val(KinhDo);
                $("#txtViDo1").val(ViDo);
                RemoveInfo();                                                
                infowindow.open(map, marker);
                inforwindows.push(infowindow);
            });            
            google.maps.event.addListener(marker, 'dragend', function (e) 
            {
                $("#txtMaDuLieu").val(MaDuLieu);
                $("#txtSoNha").val(SoNha);          
                $("#txtKinhDo").val(e.latLng.lng());
                $("#txtViDo").val(e.latLng.lat());
                $("#txtKinhDo1").val(e.latLng.lng());
                $("#txtViDo1").val(e.latLng.lat());
            });
        }

        function RemoveAllMarker() 
        {
            for (var i = 0; i < markers.length; i++)
                markers[i].setMap(null);
            markers.length = 0;
        }

        function SetAnimation(marker) 
        {
            if (marker.getAnimation() != null) 
            {
                marker.setAnimation() = null;
            }
            else 
            {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function LoadListMarker() 
        {
            RemoveAllMarker();
            $.ajax(
            {
                type: "GET",
                url: "http://localhost:9668/Service1.svc/GetLocation",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find("DuLieu_DTO").each(function () {
                        var marker = new google.maps.Marker(
                        {
                            position: new google.maps.LatLng($(this).find("ViDo").text(), $(this).find("KinhDo").text()),
                            map: map,
                            draggable: true,
                            clickable: true
                        });                        
                        marker.setMap(map);
                        markers.push(marker);                        
                        ShowInfo(marker, $(this).find("SoNha").text(), $(this).find("KinhDo").text(), $(this).find("ViDo").text(), $(this).find("MaDuLieu").text());
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Có lỗi xảy ra khi show Marker !!!");
                }
            });
        }

        function LoadComboBox(Name, NodeName, URL, Text, Value) {
            $.ajax(
            {
                type: "GET",
                url: URL,
                dataType: "xml",
                success: function (xml) {
                    $(xml).find(NodeName).each(function () {
                        AddItems(Name, $(this).find(Text).text(), $(this).find(Value).text());
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Có lỗi xảy ra khi load ComboBox !!!");
                }
            });
        }

        function AddItems(Name, Text, Value) {
            var item = document.createElement("option");
            item.text = Text;
            item.value = Value;
            document.getElementById(Name).options.add(item);
        }

        function InitDropDownList() {
            LoadComboBox("cbxQuan", "QuanHuyen_DTO", "http://localhost:9668/Service1.svc/GetDistrict", "TenQuanHuyen", "MaQuanHuyen");
            LoadComboBox("cbxPhuong", "Phuong_DTO", "http://localhost:9668/Service1.svc/GetWard", "TenPhuong", "MaPhuong");
            LoadComboBox("cbxQuan1", "QuanHuyen_DTO", "http://localhost:9668/Service1.svc/GetDistrict", "TenQuanHuyen", "MaQuanHuyen");
            LoadComboBox("cbxPhuong1", "Phuong_DTO", "http://localhost:9668/Service1.svc/GetWard", "TenPhuong", "MaPhuong");
        }

        function SearchLocation() {
            var MaQuan = document.getElementById("cbxQuan").value;
            var MaPhuong = document.getElementById("cbxPhuong").value;
            RemoveAllMarker();
            $.ajax(
            {
                type: "GET",
                url: "http://localhost:9668/Service1.svc/SearchLocation/" + MaQuan.toString() + "/" + MaPhuong.toString(),
                dataType: "xml",
                success: function (xml) {
                    var count = 0;
                    $(xml).find("DuLieu_DTO").each(function () {
                        var marker = new google.maps.Marker(
                        {
                            position: new google.maps.LatLng($(this).find("ViDo").text(), $(this).find("KinhDo").text()),
                            map: map,
                            draggable: true,
                            clickable: true
                        });
                        marker.setMap(map);
                        markers.push(marker);
                        MaDuLieu = $(this).find("MaDuLieu").text();
                        marker.setMap(map);
                        markers.push(marker);
                        SetAnimation(marker);
                        ShowInfo(marker, $(this).find("SoNha").text(), $(this).find("KinhDo").text(), $(this).find("ViDo").text(), $(this).find("MaDuLieu").text());
                        count++;
                    });
                    alert("Có " + count + " địa điểm được tìm thấy !!!");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Có lỗi xảy ra khi tìm kiếm địa điểm !!!");
                }
            });
        }

        function Refesh() 
        {            
            InitDropDownList();
            $("#txtSoNha").val("");
            $("#txtKinhDo").val("");
            $("#txtViDo").val("");
            $("#txtMaDuLieu").val("");
        }

        function InsertLocation() 
        {            
            var SoNha = document.getElementById("txtSoNha").value;
            var MaQuan = document.getElementById("cbxQuan1").value;
            var MaPhuong = document.getElementById("cbxPhuong1").value;
            var KinhDo = document.getElementById("txtKinhDo").value;
            var ViDo = document.getElementById("txtViDo").value; 
            var request = new XMLHttpRequest();
            var data = "<Location><SoNha>" + SoNha + "</SoNha>" + "<MaPhuong>" + MaPhuong + "</MaPhuong>" + "<MaQuan>" + MaQuan + "</MaQuan>" + "<KinhDo>" + KinhDo + "</KinhDo>" + "<ViDo>" + ViDo + "</ViDo></Location>";
            var url = "http://localhost:9668/Service1.svc/InsertLocation/";
            request.open("POST", url, true);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.onreadeystatechange = function () {
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        var response = request.responseText;
                        alert(response);
                    }
                }
            }
            request.send(data);
            Refesh();
            LoadListMarker();
        }

        function UpdateLocation() 
        {
            var MaDuLieu = document.getElementById("txtMaDuLieu").value;
            var SoNha = document.getElementById("txtSoNha").value;
            var MaQuan = document.getElementById("cbxQuan1").value;
            var MaPhuong = document.getElementById("cbxPhuong1").value;
            var KinhDo = document.getElementById("txtKinhDo").value;
            var ViDo = document.getElementById("txtViDo").value;
            var request = new XMLHttpRequest();
            var data = "<Location><SoNha>" + SoNha + "</SoNha>" + "<MaPhuong>" + MaPhuong + "</MaPhuong>" + "<MaQuan>" + MaQuan + "</MaQuan>" + "<KinhDo>" + KinhDo + "</KinhDo>" + "<ViDo>" + ViDo + "</ViDo>" + "<MaDuLieu>" + MaDuLieu + "</MaDuLieu></Location>";
            var url = "http://localhost:9668/Service1.svc/UpdateLocation/";
            request.open("POST", url, true);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.onreadeystatechange = function () {
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        var response = request.responseText;
                        alert(response);
                    }
                }
            }
            request.send(data);
            Refesh();
            LoadListMarker();
        }

        function DeleteLocation() 
        {
            var MaDuLieu = document.getElementById("txtMaDuLieu").value;            
            var request = new XMLHttpRequest();
            var data = "<Location><MaDuLieu>" + MaDuLieu + "</MaDuLieu></Location>";
            var url = "http://localhost:9668/Service1.svc/DeleteLocation/";
            request.open("POST", url, true);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.onreadeystatechange = function () {
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        var response = request.responseText;
                        alert(response);
                    }
                }
            }
            request.send(data);
            Refesh();
            LoadListMarker();
        }

        function CalculateDistance(Start, Goal) 
        {            
        	var dLat = toRad(Goal.lat() - Start.lat());
	        var dLon = toRad(Goal.lng() - Start.lng());
	        var dLat1 = toRad(Start.lat());
	        var dLat2 = toRad(Goal.lat());
	        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(dLat1) * Math.cos(dLat1) * Math.sin(dLon / 2) * Math.sin(dLon / 2);	
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	        return 6371 * c;
	    }

	    function toRad(deg) 
        {
	        return deg * Math.PI / 180;
	    }

	    var circles = [];

        function RemoveOverlay()
        {
            for(var i = 0; i < circles.length; i++)
            {
                circles[i].setMap(null);
            }
            circles.length = 0;
        }

	    function SearchInRadius() 
        {            
            var Start = new google.maps.LatLng(document.getElementById("txtViDo1").value, document.getElementById("txtKinhDo1").value);
            var Radius = document.getElementById("txtBanKinh").value;
            RemoveAllMarker();
            RemoveOverlay();
            $.ajax(
            {
                type: "GET",
                url: "http://localhost:9668/Service1.svc/GetLocation",
                dataType: "xml",
                success: function (xml) {
                    var count = 0;
                    $(xml).find("DuLieu_DTO").each(function () {
                        var Goal = new google.maps.LatLng($(this).find("ViDo").text(), $(this).find("KinhDo").text());
                        if (CalculateDistance(Start, Goal) <= Radius) {
                            var marker = new google.maps.Marker(
                            {
                                position: new google.maps.LatLng($(this).find("ViDo").text(), $(this).find("KinhDo").text()),
                                map: map,
                                draggable: true,
                                clickable: true
                            });
                            marker.setMap(map);
                            markers.push(marker);
                            count++;
                            ShowInfo(marker, $(this).find("SoNha").text(), $(this).find("KinhDo").text(), $(this).find("ViDo").text(), $(this).find("MaDuLieu").text());
                        }
                    });
                    alert("Có " + count + " địa điểm được tìm thấy với bán kính " + Radius + " Km");
                    var circleOptions =
                    {
                        center: new google.maps.LatLng(Start.lat(), Start.lng()),
                        radius: Radius * 1000,
                        fillColor: "#ffff00",
                        fillOpacity: 0.2,
                        strokeWeight: 0,
                        clickable: false,
                        map: map,
                        editable: false
                    };
                    var circle = new google.maps.Circle(circleOptions);
                    circles.push(circle);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Có lỗi xảy ra khi show Marker !!!");
                }
            });
        }
    </script>
    //End Child Function
</head>
<body onload="initialize()">
    <div class="topmenu">
    </div>
    <div class="bottom">
        <div class="leftmenu">
            <table style="width: 100%;">
                <tr align="center" bgcolor="yellow">
                    <td colspan="2">
                        Tìm kiếm địa điểm
                    </td>
                </tr>
                <tr>
                    <td>
                        Quận 
                    </td>
                    <td>
                        <select id="cbxQuan">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Phường 
                    </td>
                    <td>
                        <select id="cbxPhuong">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input id="btnSearch" type="button" value="Tìm kiếm" onclick="SearchLocation()" />
                    </td>
                </tr>
            </table>
            <br />
            <table style="width: 100%;">
                <tr align="center" bgcolor="yellow">
                    <td colspan="2">
                        Thông tin địa điểm
                    </td>
                </tr>
                <tr>
                    <td>
                        Mã dữ liệu 
                    </td>
                    <td>
                        <input id="txtMaDuLieu" type="text" readonly="true"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Số nhà 
                    </td>
                    <td>
                        <input id="txtSoNha" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Quận 
                    </td>
                    <td>
                        <select id="cbxQuan1">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Phường 
                    </td>
                    <td>
                        <select id="cbxPhuong1">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Kinh độ 
                    </td>
                    <td>
                        <input id="txtKinhDo" type="text" readonly="true"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Vĩ độ 
                    </td>
                    <td>
                        <input id="txtViDo" type="text" readonly="true"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input id="btnInsert" type="button" value="Thêm" onclick="InsertLocation()"/>
                        <input id="btnDelete" type="button" value="Xóa" onclick="DeleteLocation()"/>
                        <input id="btnUpdate" type="button" value="Cập nhật" onclick="UpdateLocation()"/>
                    </td>
                </tr>
            </table>
            <br/>
            <table style="width: 100%;">
                <tr align="center" bgcolor="yellow">
                    <td colspan="2">
                        Tìm kiếm trong bán kính
                    </td>
                </tr>
                <tr bgcolor="pink">
                    <td colspan="2" align="center">
                        Tọa độ hiện hành 
                    </td>
                </tr>
                <tr>
                    <td>
                        Kinh độ 
                    </td>
                    <td>
                        <input id="txtKinhDo1" type="text" readonly="true"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Vĩ độ 
                    </td>
                    <td>
                        <input id="txtViDo1" type="text" readonly="true"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Bán kính (Km)
                    </td>
                    <td>
                        <input id="txtBanKinh" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input id="btnSearchRadius" type="button" value="Tìm" onclick="SearchInRadius()"/>                       
                    </td>
                </tr>
            </table>
            <div class="content" id="map_canvas">
            </div>
        </div>
</body>
</html>
